<template>
	<view class="page">
		<u-navbar :is-back="true" :custom-back="goBack" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<view style="display: flex;align-items: center;justify-content: space-between;width: 100%;}">
					<view class="search" :style="{ width: '98%' }">
						<u-search placeholder="代理名称或设备SN" v-model="keyWord" @search="searchDiaoBo" shape="round" :show-action="false"></u-search>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="title">
			<text>操作时间</text>
			<text>设备量</text>
			<text>转移代理</text>
			<text>接收代理</text>
		</view>
		<view v-for="(item, index) in dataList" :key="index" class="item" style="display: flex;">
			<text style="display: flex;flex-wrap: wrap;width: 5rem;flex:3;">{{item.updateTime}}</text>
			<view class="" style="flex: 3;">
				<text>{{item.modelsName}}</text>
				<text style="color:#02AF74">{{item.changeNum}}个</text>
			</view>
			<view class="" style="flex: 3;">
				<text>{{item.initiatorUserName}}</text>
			</view>
			<view class="" style="flex: 3;">
				<text>{{item.recipientUserName}}</text>
			</view>
		</view>
		<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
	</view>
</template>

<script lang="js">
	import uniLoadMore from '../loadMore/uni-load-more.vue'
	import {
		terminalAllotLog
	} from '../../utils/uniApi.ts'
	export default {
		components:{
			 'uniLoadMore':uniLoadMore
		},
		data() {
			return {
				keyWord: "",
				dataList: [],
				pageN: 1, //分页的页数
				status: 'more',
				contentText: {
					contentdown: '下拉或点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				continueTypes: true,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getTerminalAllotLog()
		},
		onHide() {
			uni.hideLoading();
		},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
				setTimeout(function() {
					uni.redirectTo({
						url: "../../pages/equipment/transfersRecords",
					});
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//上拉加载更多
			onReachBottom() {
				if (!this.continueTypes) {
					return
				}
				this.pageN = this.pageN + 1;
				this.getTerminalAllotLog();
			},
			clickLoadMore() {
				this.onReachBottom()
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//调拨记录
			getTerminalAllotLog() {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					keyWord: this.keyWord,
					pageNo: this.pageN,
					pageSize: 10
				};
				terminalAllotLog(params).then((res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						var boolee = res.data.hasNext == false && this.continueTypes == false;
						if (res.data.hasNext == true) {
							this.status = "more";
						} else {
							this.status = "noMore";
						}
						if (res.data.isFirst || !boolee) {
							if (res.data.hasNext == false) {
								this.continueTypes = false;
							}
							if (this.dataList.length > 0 && this.pageN == 1) { //搜索  删除已有数据
								this.dataList = [];
							}
							this.dataList = this.dataList.concat(res.data.data)
						}
					} else {}
				});
			},
			searchDiaoBo(value) {
				this.keyWord = value
				this.pageN = 1
				this.getTerminalAllotLog()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 14px 10px 7px;
		background-color: #FFFFFF;
		border-bottom: 1px solid #E5E5E5;
	}

	.title {
		padding: 1em 0;
		font-size: 15px;
		color: #979797;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		justify-content: space-around;
	}

	.item {
		border-bottom: 1px solid #E5E5E5;
		padding: 1em 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;

		view {
			line-height: 1.2rem;
			display: flex;
			flex-direction: column;
		}
	}

	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
		// u-button{
		// 	border-radius: 0;
		// }
	}
</style>
